<template>
<div class="document_app">
  <indexLeft ref="produce" @leftstatus='leftstatus'  @filtercatalogue='filtercatalogue'></indexLeft>
  <div class="document-right">
  <el-container>
  <el-header>
    <div class="app">
      <div class="app_header">产品<span style="margin-right:5px" v-if="tableData.length>0">({{tableData.length}})</span></div>
        <div>
        <el-popover placement="bottom" trigger="hover">
					<div class="popover-content-bottom">
						<span class="popover-content-top-title" @click="catalogue">新建目录</span>
						<span class="popover-content-top-title" @click="produceadd">新建产品</span>
					</div>
					<el-button slot="reference" size="medium" type="primary" icon='el-icon-plus'>新建</el-button>
				</el-popover>
      </div>
    </div>
  </el-header>
  <el-main>
       <div class="app_header_search">
         <div class="app_header">
           <div>
           <el-input placeholder="请输入内容" v-model="prodName"   @input="inputchange" slot="preprnd" @keyup.enter.native="keyupenter" suffix-icon="el-icon-search"></el-input>
           </div>
         </div>
         <div>
        </div>
    </div>
    <div style="margin-top:20px">
        	<div class="row-box">
		<el-table :data="tableData">
			<el-table-column  label="名称">
				<template slot-scope="scope">
					<div style="display: flex;align-items: center;">
						<div class="row-img">
							<el-image style="width: 20px;height: 20px;margin-right:10px" :src="folderImg"></el-image>
						</div>
						<span style="cursor: pointer;" @click="todetails(scope.row)">{{scope.row.name}}</span>
					</div>
				</template>
			</el-table-column>
<!-- 
			<el-table-column prop="status" label="状态" width="130">
        <template slot-scope="scope"><span>{{scope.row.status|textfilters}}</span></template>
			</el-table-column> -->
			<el-table-column prop="masterName" label="负责人" width="130">
			</el-table-column>
      			<el-table-column prop="createTime" label="创建时间" width="300">
			</el-table-column>
						<el-table-column prop="creator" fixed="right" label="操作" width="80" header-align='center' align='center'>
				<template slot-scope="scope">
          <div style="display:flex;justify-content: space-around">
              <el-tooltip class="item" effect="dark" content="修改" placement="right">
                   <i class="el-icon-edit" style="color:#1890ff;cursor: pointer;margin-right:5px" @click="editclick(scope.row)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看详情" placement="right">
                   <i class="el-icon-right" style="color:#1890ff;cursor: pointer;" @click="todetails(scope.row)"></i>
              </el-tooltip>
          </div>
				</template>
			</el-table-column>
		</el-table>
	</div>


    </div>
  	<div class="proj_pagination">
				<pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="listClick"/>
			</div>
  </el-main>
  </el-container>
  </div>

</div>

</template>

<script>
import pagination from "@/components/Pagination";
import timeFilter from '@/components/projectComponents/timeFilter';
import indexLeft from './components/indexLeft';
import {list} from '@/api/prod'
import utils from "@/utils/utils";
export default {
  name: "produceIndex",
  components:{
    indexLeft,timeFilter,pagination
  },
  data(){
    return{
      	folderImg:require("../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
				fileImg:require("../../../img/140a48decfb0a656a23a22e2cbb6bee8.svg"),
      request:"request",
       sortType:"Default",
       projectType:"",
       great:false,
       current:1,
       size:20,
       total:0,
       tableData:[],
       prodName:'',
       isMyMaster:'',
       dirId:""

    }
  },
  watch: {
    $route() {
       this.listClick()
    }
  },
  filters: {
      textfilters(val){
      if(val=='00'){return '导入期'}
      else if(val=='01'){return '成长期'}
      else if(val=='02'){return '成熟期'}
      else if(val=='03'){return '衰退期'}
      else if(val=='04'){return '已关闭'}
    },
  },
  created(){
    this.listClick()
  },
  methods:{
        filtercatalogue(id){
      this.dirId=id
      this.listClick()
    },
    leftstatus(data){
      this.isMyMaster=data
      this.listClick()
    },
    inputchange(data){
      if(utils.isNull(data)){
        this.projName=data
        this.listClick();
      }
    },
      keyupenter(e){
       var keyCode = window.event? e.keyCode:e.which;
       this.prodName= e.target.value;
      if(keyCode == 13){
       this.listClick();
   }},
      async listClick(){
      	let params=new URLSearchParams()
				params.append('current',this.current)
				params.append('size',this.size)
				params.append('name',this.prodName)
				params.append('isMyMaster',this.isMyMaster)
				params.append('dirId',this.dirId)
        let res= await list(params,false)
        this.tableData=res.data.records
        this.total=res.data.total

      },
    	catalogue(){
      this.$refs.produce.fatherdir()
    },
    editclick(data){
      this.$router.push({ path:"/produce/edit",query:{prodId:data.prodId}})
    },
      produceadd(){
         this.$router.push({ path:"/produce/add" })
    },
      todetails(data){
         this.$router.push({ path:"/produce/details",query:{prodId:data.prodId}})
    },
      greatClick(){
      this.great = !this.great
    },
    projecthandleCommand(item){
      this.projectType=item
    },
  }
}
</script>

<style scoped>
	.document_app {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		min-height: 100%;
		align-items: stretch;
	}
	.document-right {
		flex: 1;
		padding: 24px;
		height: calc(100vh - 84px);
		overflow-y: auto;
		background-color: white;
	}
.app{
  width: 100%;
  padding: 24px 16px 0px 16px;
  display: flex;
  justify-content: space-between;

}
/deep/.el-main{
  padding-top:0px
}
.app_header{
    font-weight: bolder;
    text-transform: none;
    color: rgb(46, 64, 94);
    display:block;
    font-family:"PingFang SC", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:18px;
    font-weight:700;
    display: flex;
    align-items: center;

}
.app_header_search{
  padding: 0 16px 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f6f8;
  height: 50px;
    margin-top: 15px;
}
.app_search{
  cursor: pointer;
     font-size: 20px;
}
.dropdown{
     cursor: pointer;
      display: block;
      height: auto;
      text-align: left;
      border: none;
      color: #2e405e;
      padding: .71428571rem 1.14285714rem!important;
      font-size: 14px;
      text-transform: none;
      font-weight: 400;
      box-shadow: none;
      line-height: 24px;
}
.dropdownslect{
     cursor: pointer;
      display: block;
      height: auto;
      text-align: left;
      border: none;
      color: #2e405e;
      padding: .71428571rem 1.14285714rem!important;
      font-size: 14px;
      text-transform: none;
      font-weight: 400;
      box-shadow: none;
      line-height: 24px;
      background-color: #e8f4ff;
      color: #46a6ff;
}
.selectscc{
    background-color: #e8f4ff;
    color: #46a6ff;
}
.el-dropdown-link:focus{
  /* width: 93px;   */
  display: block;
  box-sizing: border-box;
 font-size: 14px;
  font-weight: 700;
  color: rgb(46, 64, 94);
  padding: 8px;
  border-radius: 10px;
  border: 3px solid #167EF8;
}
	.popover-content-top-title {
		color: #2e405e;
		font-size: 14px;
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
    text-align: center;

	}

	.popover-content-top-title:hover {
		background-color: #f5f6f8;
    		color: #2e405e;
		font-size: 14px;
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
        text-align: center;
	}
  .proj_pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
